<template>
    <div class="content">
        <div class="title-item">
            <span>定点救治力量</span>
        </div>
        <div class="table-one">
            <van-row class="row-item">
                <van-col span="7" class="col-item1">
                    <div :style="{ background:bdImg }"></div>
                    <div>总数</div>
                    <div>院感</div>
                </van-col>
                <van-col span="5" class="col-item2">
                    <div>医护人员</div>
                    <div>{{medStaffSum}}</div>
                    <div>{{medStaffInfectSum}}</div>
                </van-col>
                <van-col span="5" class="col-item1">
                    <div :style="{ background:bdImg }"></div>
                    <div>总数</div>
                    <div>使用</div>
                </van-col>
                <van-col span="7" class="col-item5">
                    <div>床位统计</div>
                    <div>{{bedSum}}</div>
                    <div>{{bedInuseSum}}</div>
                </van-col>
            </van-row>
            <van-row class="row-item">
                <van-col span="7" class="col-item1">
                    <div :style="{ background:bdImg }"></div>
                    <div>已建</div>
                    <div>在建</div>
                </van-col>
                <van-col span="5" class="col-item4">
                    <div>普通病房</div>
                    <div>{{wardBuiltSum}}</div>
                    <div>{{wardBuildingSum}}</div>
                </van-col>
                <van-col span="5" class="col-item1">
                    <div :style="{ background:bdImg }"></div>
                    <div>已建</div>
                    <div>在建</div>
                </van-col>
                <van-col span="7" class="col-item3">
                    <div>负压病房</div>
                    <div>{{npwBuiltSum}}</div>
                    <div>{{npwBuildingSum}}</div>
                </van-col>
            </van-row>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="4">机构名称</van-col>
                <van-col span="3">已使用</van-col>
                <van-col span="2">床位</van-col>
                <van-col span="4">医护人员</van-col>
                <van-col span="4">医护感院</van-col>
                <van-col span="2">普通</van-col>
                <van-col span="4">负压病房</van-col>
            </van-row>
            <van-row class="table-item" v-for="(item) in cureList" :key="item.id">
                <van-col span="4">{{item.hosp_name}}</van-col>
                <van-col span="3">{{item.bed_inuse}}</van-col>
                <van-col span="3">{{item.bed_sum}}</van-col>
                <van-col span="3">{{item.med_staff_sum}}</van-col>
                <van-col span="4">{{item.med_staff_infect}}</van-col>
                <van-col span="3">{{item.ward_built}}</van-col>
                <van-col span="3">{{item.npw_built}}</van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item" style="padding-top: 0">
            <span>收治人员情况</span>
        </div>
        <div class="chart-div">
            <div id="admitted" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>援助湖北医疗队</span>
        </div>
        <div style="padding: 0 10px" class="table-div">
            <van-row class="table-item">
                <van-col span="6">批次</van-col>
                <van-col span="6">人数</van-col>
                <van-col span="6">领队</van-col>
                <van-col span="6">连线</van-col>
            </van-row>
            <van-row class="table-item" v-for="(item) in aidList" :key="item.id">
                <van-col span="6">{{item.batch_num}}</van-col>
                <van-col span="6">{{item.person_count}}</van-col>
                <van-col span="6">{{item.leader_name}}</van-col>
                <van-col span="6">{{item.attach_info}}</van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>救治力量情况</span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="8">
                    <div id="force_1" class="chart-item"></div>
                </van-col>
                <van-col span="8">
                    <div id="force_2" class="chart-item"></div>
                </van-col>
                <van-col span="8">
                    <div id="force_3" class="chart-item"></div>
                </van-col>
            </van-row>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>三甲医院情况</span>
        </div>
        <div class="table-one">
            <van-row class="row-item">
                <van-col span="7" class="col-item1">
                    <div :style="{ background:bdImg }"></div>
                    <div>总数</div>
                </van-col>
                <van-col span="5" class="col-item2">
                    <div>编制床位</div>
                    <div>{{compileBedSum}}</div>
                </van-col>
                <van-col span="5" class="col-item1">
                    <div :style="{ background:bdImg }"></div>
                    <div>总数</div>
                </van-col>
                <van-col span="7" class="col-item3">
                    <div>实有床位</div>
                    <div>{{actualBedSum}}</div>
                </van-col>
            </van-row>
            <van-row class="row-item">
                <van-col span="7" class="col-item1">
                    <div :style="{ background:bdImg }"></div>
                    <div>总数</div>
                </van-col>
                <van-col span="5" class="col-item4">
                    <div>职业医师</div>
                    <div>{{medPractitionerSum}}</div>
                </van-col>
                <van-col span="5" class="col-item1">
                   <div :style="{ background:bdImg }"></div>
                    <div>总数</div>
                </van-col>
                <van-col span="7" class="col-item5">
                    <div>注册护士</div>
                    <div>{{regNurseSum}}</div>
                </van-col>
            </van-row>
        </div>
        <div class="table-div" style="padding-bottom: 0">
            <van-row class="table-item">
                <van-col span="4">机构名称</van-col>
                <van-col span="4">所属地区</van-col>
                <van-col span="4">编制床位</van-col>
                <van-col span="4">实有床位</van-col>
                <van-col span="4">职业医师</van-col>
                <van-col span="4">注册护士</van-col>
            </van-row>
            <van-row class="table-item" v-for="(item) in threeList" :key="item.id">
                <van-col span="4">{{item.hosp_name}}</van-col>
                <van-col span="4">{{item.area_name}}</van-col>
                <van-col span="4">{{item.compile_bed}}</van-col>
                <van-col span="4">{{item.actual_bed}}</van-col>
                <van-col span="4">{{item.med_practitioner}}</van-col>
                <van-col span="4">{{item.reg_nurse}}</van-col>
            </van-row>
        </div>
        <div class="title-item">
            <span>检测试剂使用情况</span>
        </div>
        <div class="chart-div">
            <div id="testing" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>核酸检测能力</span>
        </div>
        <div class="chart-div">
            <div id="useing" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { cureInfoList, nucleateTwoList, nucleateThreeList, nucleateFourList, reagentList, threeInfoList, personInfoList, hospitalInfoList, hospitalTwoInfoList, aidHBList } from '@/api/rescue-force'
import { Dialog } from 'vant'

export default {
  name: 'index',
  data () {
    return {
      bdImg: `url('http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/icon-mobel/%E7%97%85%E6%AF%92.png')`,
      // 定点救治能力
      cureList: [],
      // 收治人员情况
      personList: [],
      // 援助湖北医疗队
      aidList: [],
      // 三甲医院情况
      threeList: [],
      // 核酸检测能力1
      oneNucleateList: [],
      // 核酸检测能力2
      twoNucleateList: [],
      // 核酸检测能力3
      threeNucleateList: [],
      // 核酸检测能力4
      fourNucleateList: [],
      // 检测试剂使用情况
      useList: [],
      // 医院信息
      hospitalList: [],
      // 医院信息2
      hospitalTwoList: [],

      // 医护人员
      medStaffSum: 0,
      // 负压病房
      npwBuiltSum: 0,
      // 普通病房
      wardBuiltSum: 0,
      // 床位
      bedSum: 0,
      // 医护院感
      medStaffInfectSum: 0,
      // 床位使用
      bedInuseSum: 0,
      // 病房-负压病房-在建
      npwBuildingSum: 0,
      // 病房-普通病房-在建
      wardBuildingSum: 0,

      // 编制床位
      compileBedSum: 0,
      // 实有床位
      actualBedSum: 0,
      // 职业医师
      medPractitionerSum: 0,
      // 注册护士
      regNurseSum: 0,

      // 收治人员情况柱状图医院名
      hospNameList: [],
      // 确诊人数
      confirmNumList: [],
      // 治愈人数
      cureNumList: [],
      // 疑似人数
      suspectNumList: [],
      // 重症人数
      severeNumList: [],

      // 核酸检测能力折线图日期
      calendar: [],
      // 核酸检测能力折线图可用天数
      day: [],
      // 核酸检测能力折线图库存
      bankNum: [],
      // 核酸检测能力折线图消耗
      useDayAmount: [],

      // 检测试剂使用情况饼型图类别
      categoryNames: []

    }
  },
  methods: {
    timestampToTime (timestamp) {
      let date = new Date(timestamp)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },
    admitted (personList) {
      let myChart = echarts.init(document.getElementById('admitted'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          bottom: 10,
          left: '25%',
          right: '25%',
          data: ['确诊人数', '治愈人数', '疑似人数', '重症人数']
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '23%',
          top: '6%',
          containLabel: true
        },
        yAxis: {
          type: 'value'
        },
        xAxis: {
          type: 'category',
          data: this.hospNameList
        },
        series: [
          {
            name: '确诊人数',
            type: 'bar',
            stack: '总量',
            color: '#37a2da',
            data: this.confirmNumList
          },
          {
            name: '治愈人数',
            type: 'bar',
            stack: '总量',
            color: '#32c5e9',
            data: this.cureNumList
          },
          {
            name: '疑似人数',
            type: 'bar',
            color: '#67e0e3',
            stack: '总量',
            data: this.suspectNumList
          },
          {
            name: '重症人数',
            type: 'bar',
            stack: '总量',
            color: '#9fe6b8',
            data: this.severeNumList
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    testing () {
      let myChart = echarts.init(document.getElementById('testing'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          bottom: 10,
          data: ['消耗', '库存', '可用天数']
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '15%',
          top: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.calendar
        },
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '消耗',
            type: 'line',
            stack: '总量',
            data: this.useDayAmount
          },
          {
            name: '库存',
            type: 'line',
            stack: '总量',
            data: this.bankNum
          },
          {
            name: '可用天数',
            type: 'line',
            stack: '总量',
            data: this.day
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    useing (useList) {
      let myChart = echarts.init(document.getElementById('useing'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: ' {b}  <br/> {c} ({d}%)'
        },
        legend: {
          left: '20%',
          right: '30%',
          bottom: 10,
          data: this.categoryNames
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true
        },
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '类型',
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            data: (function () {
              var res = []
              for (var i = 0, size = useList.length; i < size; i++) {
                res.push({
                  name: useList[i].type,
                  value: useList[i].sus_today_pos
                })
              }
              return res
            })(),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    force_1 () {
      let myChart = echarts.init(document.getElementById('force_1'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'item',
          position: ['10%', '40%'],
          formatter: '{b} <br/> {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          data: ['市委党校', '新民市']
        },
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '35%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 1, name: '新民市' },
              { value: 21, name: '市委党校' }
            ]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    force_2 () {
      let myChart = echarts.init(document.getElementById('force_2'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'item',
          position: ['10%', '40%'],
          formatter: '{b} <br/> {c} ({d}%)'
        },
        legend: {
          bottom: 10
        },
        color: [ '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '35%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 24, name: '市级' },
              { value: 46, name: '省级' }
            ]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    force_3 () {
      let myChart = echarts.init(document.getElementById('force_3'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'item',
          position: ['10%', '40%'],
          formatter: '{b} <br/> {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          data: ['省人民医院', '市委党校']
        },
        color: [ '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '35%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '14',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 194, name: '省人民医院' },
              { value: 74, name: '市委党校' }
            ]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 定点救治能力
    cureInfoList () {
      cureInfoList().then(ret => {
        if (ret.data.errcode === 0) {
          this.cureList = ret.data.data
          this.cureList.forEach((n) => {
            this.medStaffSum += parseInt(n.med_staff_sum)
            this.npwBuiltSum += parseInt(n.npw_built)
            this.wardBuiltSum += parseInt(n.ward_built)
            this.bedSum += parseInt(n.bed_sum)
            this.medStaffInfectSum += parseInt(n.med_staff_infect)
            this.bedInuseSum += parseInt(n.bed_inuse)
            this.npwBuildingSum += parseInt(n.npw_building)
            this.wardBuildingSum += parseInt(n.ward_building)
            n.imp_date = this.timestampToTime(n.imp_date)
          })
          console.log(this.cureList.imp_date)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 收治人员情况
    personInfoList () {
      personInfoList().then(ret => {
        if (ret.data.errcode === 0) {
          this.personList = ret.data.data
          this.personList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
            this.hospNameList.push(n.hosp_name)
            this.severeNumList.push(n.severe_num)
            this.confirmNumList.push(n.confirm_num)
            this.suspectNumList.push(n.suspect_num)
            this.cureNumList.push(n.cure_num)
          })
          this.admitted()
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 援助湖北医疗队
    aidHBList () {
      aidHBList().then(ret => {
        if (ret.data.errcode === 0) {
          this.aidList = ret.data.data
          this.aidList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
          })
          console.log(this.aidList.imp_date)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 三甲医院情况
    threeInfoList () {
      threeInfoList().then(ret => {
        if (ret.data.errcode === 0) {
          this.threeList = ret.data.data
          this.threeList.forEach((n) => {
            this.compileBedSum += parseInt(n.compile_bed)
            this.actualBedSum += parseInt(n.actual_bed)
            this.medPractitionerSum += parseInt(n.med_practitioner)
            this.regNurseSum += parseInt(n.reg_nurse)
            n.imp_date = this.timestampToTime(n.imp_date)
          })
          console.log(this.threeList.imp_date)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 核酸检测能力1
    nucleateOneList () {
      reagentList().then(ret => {
        if (ret.data.errcode === 0) {
          this.oneNucleateList = ret.data.data
          this.oneNucleateList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
            this.calendar.push(n.md)
            this.day.push(n.day)
            this.bankNum.push(n.bank_num)
            this.useDayAmount.push(n.use_day_amount)
          })
          this.testing()
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 核酸检测能力2
    nucleateTwoList () {
      nucleateTwoList().then(ret => {
        if (ret.data.errcode === 0) {
          this.twoNucleateList = ret.data.data[0]
          this.twoNucleateList.imp_date = this.timestampToTime(this.twoNucleateList.imp_date)
          console.log(this.twoNucleateList.imp_date)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 核酸检测能力3
    nucleateThreeList () {
      nucleateThreeList().then(ret => {
        if (ret.data.errcode === 0) {
          this.threeNucleateList = ret.data.data
          this.threeNucleateList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
          })
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 核酸检测能力4
    nucleateFourList () {
      nucleateFourList().then(ret => {
        if (ret.data.errcode === 0) {
          this.fourNucleateList = ret.data.data
          this.fourNucleateList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
          })
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 检测试剂使用情况
    reagentList () {
      nucleateTwoList().then(ret => {
        if (ret.data.errcode === 0) {
          this.useList = ret.data.data
          this.useList.forEach((n) => {
            n.imp_date = this.timestampToTime(n.imp_date)
            this.categoryNames.push(n.type)
          })
          this.useing(this.useList)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 医院信息
    hospitalInfoList () {
      hospitalInfoList().then(ret => {
        if (ret.data.errcode === 0) {
          this.hospitalList = ret.data.data[0]
          this.hospitalList.imp_date = this.timestampToTime(this.hospitalList.imp_date)
          console.log(this.hospitalList.imp_date)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 医院信息2
    hospitalTwoInfoList () {
      hospitalTwoInfoList().then(ret => {
        if (ret.data.errcode === 0) {
          this.hospitalTwoList = ret.data.data[0]
          this.hospitalTwoList.imp_date = this.timestampToTime(this.hospitalTwoList.imp_date)
          console.log(this.hospitalTwoList.imp_date)
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    }
  },
  mounted () {
    this.force_1()
    this.force_2()
    this.force_3()
    this.cureInfoList()
    this.personInfoList()
    this.aidHBList()
    this.threeInfoList()
    this.nucleateOneList()
    this.nucleateTwoList()
    this.nucleateThreeList()
    this.nucleateFourList()
    this.reagentList()
    this.hospitalInfoList()
    this.hospitalTwoInfoList()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
    }
    .table-one {
        text-align: center;
        margin: auto 0;
        padding: 0 10px;
    }
    .table-one .row-item{
        background-color: #ffffff;
    }

    .row-item {
        line-height: 20px;
    }
    .row-item  .van-col {
        padding: 6px 0;
    }
    .col-item1 {
        font-size: 10px;
        color: #33CCFF;
    }
    .col-item1 div{
        margin: auto;
        background-size: cover !important;
        height: 20px;
        width: 20px;
    }
    .col-item2 div,
    .col-item3 div,
    .col-item4 div{
        height: 20px;
    }
    .col-item1 :first-child {
        font-size: 12px;
        font-weight: bold;
    }

    .col-item2 {
        font-size: 10px;
        color: #FF9900;
    }

    .col-item2 :first-child {
        font-size: 12px;
        font-weight: bold;
    }

    .col-item3 {
        font-size: 10px;
        color: #C386FF;
    }

    .col-item3 :first-child {
        font-size: 12px;
        font-weight: bold;
    }

    .col-item4 {
        font-size: 10px;
        color: #24A7FF;
    }
    .col-item4 :first-child {
        font-size: 12px;
        font-weight: bold;
    }

    .col-item5 {
        font-size: 10px;
        color: #9FCFFF;
    }

    .col-item5 :first-child {
        font-size: 12px;
        font-weight: bold;
    }

    .chart-item-1 {
        width: 100%;
        height: 240px;
    }

    .chart-item {
        width: 100%;
        height: 140px;
    }

    .table-div {
        padding: 10px;
    }

    .title-item {
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }

    .title-item span {
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }

    .table-item {
        font-size: 10px;
        text-align: center;
        /*padding: 0 5px;*/
        border: 1px solid #dddddd;
        border-top: 0;
    }

    .table-item:first-child {
        border-top: 1px solid #dddddd;
    }

    .table-item:nth-child(2n+1) {
        background: #ffffff;
    }

    .van-col {
        padding: 10px 0;
    }

    .content >>> .van-progress__pivot {
        background-color: initial !important;
        color: #ffffff;
    }

    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag {
        margin-right: 1px;
    }
    .chart-div{
        padding: 0 10px;
    }
    .chart-div .chart-item-1,.chart-div .chart-item{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin-top: 10px;
    }
    .mb10{
        margin-bottom: 10px;
    }
    .van-col{
        overflow: hidden; /*自动隐藏文字*/
        text-overflow: ellipsis;/*文字隐藏后添加省略号*/
        white-space: nowrap;/*强制不换行*/
    }
    .chart-div .van-col{
        padding: 0;
    }
</style>
